<template>
  <div class="termite-report-detail">
    <!-- 头部导航 -->
    <div class="nav-header">
      <van-icon name="arrow-left" class="back-icon" @click="goBack" />
      <div class="title">白蚁上报</div>
      <div class="placeholder"></div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 信息卡片容器 -->
      <div class="info-card">
        <!-- 地址信息 -->
        <div class="info-section">
          <!-- 所在小区 -->
          <div class="form-item">
            <div class="form-label">所在小区</div>
            <div class="form-input">
              <span class="form-value">鞍山二村</span>
            </div>
          </div>

          <!-- 房屋地址 -->
          <div class="form-item">
            <div class="form-label">房屋地址</div>
            <div class="form-input">
              <span class="form-value">10号楼1011</span>
            </div>
          </div>
        </div>

        <!-- 问题描述 -->
        <div class="info-section">
          <div class="form-textarea-item">
            <div class="form-label">问题描述</div>
            <div class="textarea-container">
              <div class="description-content">最近一周白蚁情况严重</div>
            </div>
          </div>
        </div>

        <!-- 上传图片 -->
        <div class="info-section">
          <div class="info-item no-margin">
            <span class="label"></span>
          </div>
          <div class="image-grid">
            <div
              v-for="(image, index) in imageList"
              :key="index"
              class="image-item"
              @click="previewImage(index)"
            >
              <img :src="image" alt="白蚁图片" />
            </div>
          </div>
        </div>

        <!-- 上传视频 -->
        <div class="info-section">
          <div class="info-item no-margin">
            <span class="label">上传视频</span>
            <span class="video-size">(小于500M)</span>
          </div>
          <div class="video-container" @click="playVideo">
            <video
              :src="videoUrl"
              width="100px"
              height="60px"
              class="video-player"
            ></video>
            <div class="video-play-icon">
              <van-icon name="play-circle-o" size="24" />
            </div>
          </div>
        </div>

        <!-- 防治企业 -->
        <div class="info-section">
          <div class="form-item">
            <div class="form-label">防治企业</div>
            <div class="form-input">
              <span class="form-value">上海上百杀虫科技有限公司</span>
              <van-icon name="arrow" class="arrow-icon" />
            </div>
          </div>
        </div>

        <!-- 预约时间 -->
        <div class="info-section">
          <div class="form-item">
            <div class="form-label">预约时间</div>
            <div class="form-input">
              <span class="form-value">2025-11-12 14:00-16:00</span>
              <van-icon name="arrow" class="arrow-icon" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片预览 -->
    <van-image-preview
      v-model="showImagePreview"
      :images="imageList"
      :start-position="currentImageIndex"
      @close="showImagePreview = false"
    />

    <!-- 视频播放弹窗 -->
    <van-dialog
      v-model="showVideoDialog"
      title="视频播放"
      class="video-preview-dialog"
      :show-confirm-button="true"
      confirm-button-text="关闭"
      @confirm="closeVideoPlayer"
      @before-close="handleDialogBeforeClose"
    >
      <div class="video-dialog-content">
        <video
          :src="videoUrl"
          controls
          autoplay
          class="dialog-video-player"
          ref="videoPlayerRef"
        ></video>
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: "TermiteReportDetail",
  data() {
    return {
      // 图片列表 - 使用更合适的占位图片
      imageList: [
        "https://ww2.sinaimg.cn/mw690/005EUiO2ly1hxj8yk8u5oj30m81c37d9.jpg",
        "https://ww2.sinaimg.cn/mw690/005EUiO2ly1hxj8yk8u5oj30m81c37d9.jpg",
        "https://ww2.sinaimg.cn/mw690/005EUiO2ly1hxj8yk8u5oj30m81c37d9.jpg",
        "https://ww2.sinaimg.cn/mw690/005EUiO2ly1hxj8yk8u5oj30m81c37d9.jpg",
        "https://ww2.sinaimg.cn/mw690/005EUiO2ly1hxj8yk8u5oj30m81c37d9.jpg",
      ],
      showImagePreview: false,
      currentImageIndex: 0,
      showVideoDialog: false,
      videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4",
      reportData: {
        community: "鞍山二村",
        address: "10号楼1011",
        description: "最近一周白蚁情况严重",
        company: "上海上百杀虫科技有限公司",
        appointmentTime: "2025-11-12 14:00-16:00",
      },
    };
  },

  created() {
    this.loadReportDetail();
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },

    // 加载上报详情
    async loadReportDetail() {
      try {
        // 这里可以根据路由参数获取具体的上报ID
        const reportId = this.$route.params.id;

        // 调用API获取详情数据
        // const response = await this.$api.report.getReportDetail(reportId);
        // if (response.success) {
        //   this.reportData = response.data;
        //   this.imageList = response.data.images || [];
        // }

        console.log("加载上报详情:", reportId);
      } catch (error) {
        console.error("加载详情失败:", error);
        this.$toast.fail("加载详情失败");
      }
    },

    // 预览图片
    previewImage(index) {
      this.currentImageIndex = index;
      this.showImagePreview = true;
    },

    // 播放视频
    playVideo() {
      this.showVideoDialog = true;
    },

    closeVideoPlayer() {
      this.showVideoDialog = false;
    },

    handleDialogBeforeClose() {
      // 关闭前暂停视频播放
      if (this.$refs.videoPlayerRef) {
        this.$refs.videoPlayerRef.pause();
      }
      return true;
    },
  },
};
</script>

<style scoped>
.termite-report-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 头部导航样式 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  background-color: #fff;
  border-bottom: 1px solid #ebedf0;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-icon {
  font-size: 20px;
  color: #323233;
  cursor: pointer;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
}

.placeholder {
  width: 20px;
}

/* 内容区域 */
.content {
  padding: 12px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 46px);
}

/* 信息卡片容器 */
.info-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  padding: 0 16px;
}

/* 信息区块样式 */
.info-section {
  background-color: #fff;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
}

.info-section:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.info-section:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: none;
  margin-bottom: 20px;
}

/* 表单项样式 - 参考HomeView.vue */
.form-item {
  display: flex;
  align-items: center;
  background-color: transparent;
  padding: 0;
  border-bottom: 1px solid #ebedf0;
  height: 45px;
  margin-bottom: 0;
}

.form-item:last-child {
  border-bottom: none;
}

.form-textarea-item {
  background-color: transparent;
  padding: 12px 0;
  margin-bottom: 0;
}

.form-label {
  height: 20px;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  min-width: 80px;
}

.form-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 20px;
}

.form-value {
  height: 20px;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
}

/* 其他信息项样式 */
.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  min-height: 20px;
  padding: 0;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item.no-margin {
  margin-bottom: 8px;
}

.label {
  font-size: 14px;
  color: #666;
  font-weight: 400;
}

.value {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  flex: 1;
  text-align: right;
  margin-right: 8px;
}

.arrow-icon {
  font-size: 12px;
  color: #c8c9cc;
  margin-left: 8px;
}

/* 问题描述样式 */
.description {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-top: 0;
  padding: 0 0 14px 0;
}

/* 图片网格样式 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
  padding: 0 0 14px 0;
}

.image-item {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.image-item:hover {
  transform: scale(1.02);
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 视频样式 */
.video-size {
  font-size: 12px;
  color: #999;
  margin-left: 4px;
}

.video-container {
  position: relative;
  width: 100px;
  height: 60px;
  margin-top: 8px;
  margin-bottom: 14px;
  margin-left: 0;
  border-radius: 4px;
  cursor: pointer;
}

.video-player {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.video-play-icon:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.video-play-icon .van-icon {
  font-size: 24px;
  color: #fff;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .content {
    padding: 10px;
  }

  .info-card {
    padding: 0 14px;
  }

  .info-section {
    margin-bottom: 0;
  }

  .form-item {
    padding: 0;
    height: 40px;
  }

  .form-textarea-item {
    padding: 12px 0;
  }

  .form-label {
    min-width: 70px;
    font-size: 13px;
  }

  .form-value {
    font-size: 13px;
  }

  .info-item {
    padding: 0;
  }

  .description {
    padding: 0 0 14px 0;
  }

  .image-grid {
    gap: 6px;
    margin-top: 6px;
    padding: 0 0 14px 0;
  }

  .video-container {
    margin-left: 0;
    margin-bottom: 14px;
  }

  .video-play-icon {
    width: 25px;
    height: 25px;
  }

  .video-play-icon .van-icon {
    font-size: 20px;
  }
}

@media (min-width: 376px) and (max-width: 768px) {
  .content {
    padding: 16px;
  }

  .info-section {
    margin-bottom: 0;
  }
}

/* 视频预览对话框样式 */
:deep(.video-preview-dialog) {
  width: 90% !important;
  max-width: 600px;
}

:deep(.video-preview-dialog .van-dialog__content) {
  padding: 0;
}

:deep(.video-preview-dialog .van-dialog__message) {
  padding: 0;
}

/* 视频对话框内容样式 */
.video-dialog-content {
  padding: 0;
}

.dialog-video-player {
  width: 100%;
  max-height: 70vh;
  display: block;
  background: #000;
}

.textarea-container {
  margin-top: 12px;
}

.description-content {
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  padding: 0 0 16px 0;
}
</style>
